import { createBrowserRouter, RouterProvider, RouteObject } from 'react-router-dom';
import HomeView from '@/views/HomeView';
// import Preview from '@/views/Preview';
// import Unocss from '@/views/Unocss';
// import Drag from '@/views/Drag';
import MaterialsView from '@/views/MaterialsView';
import SelectGroupView from '@/views/MaterialsView/page/SelectGroupView';
import InputGroupView from '@/views/MaterialsView/page/InputGroupView';
// import ContractGroupView from '@/views/MaterialsView/page/ContractGroupView';
// import NoteGroupView from '@/views/MaterialsView/page/NoteGroupView';
// import AdvanceGroupView from '@/views/MaterialsView/page/AdvanceGroupView';
// import PersonGroupView from '@/views/MaterialsView/page/PersonGroupView';
import SingleSelect from '@/components/Survey/Materials/SelectComs/SingleSelect';
import MuSelect from '@/components/Survey/Materials/SelectComs/MuSelect';
import SinglePicSelect from '@/components/Survey/Materials/SelectComs/SinglePicSelect';
// import OptionSelect from '@/components/Survey/Materials/SelectComs/OptionSelect';
// import SinglePicSelect from '@/components/Survey/Materials/SelectComs/SinglePicSelect';
// import MuPicSelect from '@/components/Survey/Materials/SelectComs/MuPicSelect';
// import TextNode from '@/components/Survey/Materials/NoteComs/TextNode';
// import EditorView from '@/views/EditorView';
// import SurveyType from '@/views/EditorView/LeftSide/SurveyType';
// import Outline from '@/views/EditorView/LeftSide/Outline';
// import { useMaterialStore } from '@/stores/useMaterial';

const routes: RouteObject[] = [
  {
    path: '/',
    element: <HomeView />
  },
  // {
  //   path: '/preview/:id',
  //   element: <Preview />,
  // },
  // {
  //   path: '/unocss',
  //   element: <Unocss />,
  // },
  // {
  //   path: '/drag',
  //   element: <Drag />,
  // },
  {
    path: '/materials',
    element: <MaterialsView />,
    children: [
      {
        path: 'select-group',
        element: <SelectGroupView />,
        children: [
          {
            path: 'single-select',
            index: true,
            element: <SingleSelect />
          },
          {
            path: 'mu-select',
            element: <MuSelect />
          },
          // {
          //   path: 'option-select',
          //   element: <OptionSelect />,
          // },
          {
            path: 'single-pic-select',
            element: <SinglePicSelect />
          }
          // {
          //   path: 'mu-pic-select',
          //   element: <MuPicSelect />,
          // },
        ]
      },
      {
        path: 'input-group',
        element: <InputGroupView />
      }
      // {
      //   path: 'contact-group',
      //   element: <ContractGroupView />,
      // },
      // {
      //   path: 'note-group',
      //   element: <NoteGroupView />,
      //   children: [
      //     {
      //       path: '',
      //       element: <TextNode />,
      //     },
      //   ],
      // },
      // {
      //   path: 'advanced-group',
      //   element: <AdvanceGroupView />,
      // },
      // {
      //   path: 'personal-info-group',
      //   element: <PersonGroupView />,
      //   children: [
      //     {
      //       path: '',
      //       element: <SingleSelect />,
      //     },
      //     {
      //       path: 'person-info-edu',
      //       element: <SingleSelect />,
      //     },
      //   ],
      // },
    ]
  }
  // {
  //   path: '/editor',
  //   element: <EditorView />,
  //   children: [
  //     {
  //       path: 'survey-type',
  //       element: <SurveyType />,
  //     },
  //     {
  //       path: 'outline',
  //       element: <Outline />,
  //     },
  //   ],
  // },
];

const router = createBrowserRouter(routes);

export { router };

// import { createBrowserRouter, RouteObject } from 'react-router-dom';
// import { lazy } from 'react';
// import HomeView from '@/views/HomeView';
// const MaterialsView = lazy(() => import('@/views/MaterialsView/index'));

// const routes: RouteObject[] = [
//   {
//     path: '/',
//     element: <HomeView />
//   },
//   {
//     path: '/preview/:id',
//     element: <HomeView />
//   },
//   {
//     path: '/materials',
//     element: <MaterialsView />,
//     redirect: '/select-group',
//     // children: [
//     //   { index: true, element: <HomeView /> },
//     //   { path: 'home', element: <HomeView /> }
//     // ]
//   }
// ];

// export const router = createBrowserRouter(routes);
